<template>
  <div>
    <div style="display: flex; align-items: center" id="id">
      <div :style="inCircle"></div>
      <div :style="circleValue">{{ value }}</div>
    </div>
  </div>
</template>
<script>
import baseComp from "./baseComp";

export default {
  name: "statusLight",
  model: {
    prop: 'circle',
    event: 'circleChange'
  },
  extends: baseComp,
  props: {
    myData: {
      type: Object,
      default: () => {
      },
    },
    circle: {
      type: [String,Object,Number],
      default: () => {
      },
    },
  },
  data() {
    return {
      inCircle: {
        background: "#FAFAFA;border-bottom:#E8E8E8!impotant;color: #333333;",
        width: '12px',
        height: '12px',
        borderRadius: '100%',
        backgroundColor: '#4bd962',
      },
      circleValue: {
        color: '#0BA1F8',
        margin: '0 5px'
      },
      value: '成功',
      id: 'myStatus',
    };
  },
  components: {},
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  watch: {
    circle: {
      handler(v) {
          if (v){
            if(typeof v == 'string' || typeof v == 'number'){
              this.initData(v);
            }
          }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    initData(v) {
      let obj = this.myData;
      //配置数据值
        if (!obj.tableHeaderRenderTableData){
            return;
        }
      let table = obj.tableHeaderRenderTableData
      for (const tableValue in table) {
        if (v == table[tableValue].rowNum) {
          //修改替换颜色
          let statusColor = table[tableValue].statusColor;
          this.inCircle.backgroundColor = statusColor
          //修改值
          this.value = table[tableValue].text;
          this.circleValue.color = table[tableValue].textColor;
          break;
        } else {
          this.inCircle.backgroundColor = '#4bd962'
          this.value = table[tableValue].text;
          this.circleValue.color = '#0BA1F8';
        }
      }
    }

  },
};
</script>
<style lang="less" scoped>
.container {
  height: 400px;
  width: 30vw;
}


</style>


